<template>
  <div class="hello">
    <van-nav-bar title="云智益访客登记" />
    <van-uploader class="hello-choiceimg"
                  type="file"
                  accept="image/*"
                  :after-read="onRead">
      <img v-if="image!=''"
           :src="image"
           alt=""
           ref="manimg"
           class="manimg">
      <div class="icon">
        <van-icon color="#8d9ea7"
                  name="photograph" />
      </div>
    </van-uploader>
    <div class="victor">
      <div class="victor-title">访客信息</div>
      <div class="victor-info">
        <van-cell-group>
          <van-field v-model="name"
                     required
                     clearable
                     label="姓名"
                     placeholder="请输入姓名" />
          <van-cell title="来访类别"
                    is-link
                    arrow-direction="down"
                    :value="category"
                    @click="choicecage" />
          <van-cell title="来访日期"
                    is-link
                    :value="day"
                    arrow-direction="down"
                    @click="choiceday" />
          <van-cell title="开始时间"
                    is-link
                    :value="starttime"
                    arrow-direction="down"
                    @click="choicestarttime" />
          <van-cell title="结束时间"
                    is-link
                    :value="endtime"
                    arrow-direction="down"
                    @click="choiceendtime" />
          <van-field v-model="message"
                     label="备注"
                     type="textarea"
                     placeholder="请输入留言"
                     rows="3"
                     autosize />
        </van-cell-group>
        <van-button class="createbtn"
                    @click="onsubmit">创建邀约</van-button>
      </div>
    </div>
    <!-- 选择来访类别框 -->
    <van-popup v-model="showpicker"
               position="bottom"
               :overlay="true">
      <van-picker show-toolbar
                  :columns="columns"
                  @change="onChange"
                  @confirm="oncageok"
                  @cancel="onclose" />
    </van-popup>
    <!-- 选择日期 -->
    <van-popup v-model="showday"
               position="bottom"
               :overlay="true">
      <van-datetime-picker type="date"
                           @cancel="onclose"
                           :min-date="currentDate"
                           @confirm="ontimeok" />
    </van-popup>
    <!-- 选择开始时间 -->
    <van-popup v-model="showstarttime"
               position="bottom"
               :overlay="true">
      <van-datetime-picker type="time"
                           @cancel="onclose"
                           :min-hour="minHour"
                           :max-hour="maxHour-1"
                           @confirm="onstartok" />
    </van-popup>
    <!-- 选择结束时间 -->
    <van-popup v-model="showendtime"
               position="bottom"
               :overlay="true">
      <van-datetime-picker type="time"
                           @cancel="onclose"
                           :min-hour="minHour+1"
                           :max-hour="maxHour"
                           @confirm="onendok" />
    </van-popup>
  </div>
</template>

<script>
import { Uploader, NavBar, icon, Field, CellGroup, Cell, Picker, DatetimePicker, Popup, Button, Toast } from 'vant';
import { formatDate } from "../utils/date.js"
export default {
  name: 'home',
  data () {
    return {
      name: "",
      category: "",
      showpicker: false,
      columns: ["公事", "找人", "私访", "偷情"],
      showday: false,
      currentDate: new Date(),
      day: "",
      // 开始时间
      showstarttime: false,
      starttime: "",
      minHour: 9,
      maxHour: 18,
      // 结束时间
      showendtime: false,
      endtime: "",
      // 留言
      message: "",
      // 图片
      image: "",
      imageurl:""
    }
  },
  props: {//父组件传过来的值
    // msg: String
  },
  components: {
    [Uploader.name]: Uploader,
    [NavBar.name]: NavBar,
    [icon.name]: icon,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [Toast.name]: Toast
  },
  methods: {
    onRead (file) {
      // eslint-disable-next-line no-console
      console.log(file)
      this.image = file.content
      // this.$refs.manimg.src = file.content;
      var fromData = new FormData();
      fromData.append("image", file.file)
      // console.log(formatDate.get("manimg"))
      this.$ajax.post(this.baseurl + "image/uploadimg", fromData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      }).then((res) => {
        if (res.status == 200 && res.data.code == 20000) {
          this.imageurl = res.data.data;
          Toast('图片上传成功！');
        } else {
          Toast("图片上传失败！")
        }
      })
    },
    choicecage: function () {
      this.showpicker = true;
    },
    onChange (picker, value, ) {
      // alert(`当前值：${value}, 当前索引：${index}`);
      this.category = value;
    },
    oncageok (value) {
      this.category = value;
      this.showpicker = false;
    },
    onclose: function () {
      this.showpicker = false;
      this.showday = false;
      this.showstarttime = false;
      this.showendtime = false;
    },
    choiceday: function () {
      this.showday = true;
    },
    ontimeok (value) {
      this.day = formatDate(value, 'yyyy-MM-dd');
      this.showday = false;
    },
    choicestarttime () {
      this.showstarttime = true;
    },
    onstartok (value) {
      // console.log(value);
      this.starttime = value;
      this.showstarttime = false;
    },
    choiceendtime () {
      this.showendtime = true;
    },
    onendok (value) {
      this.endtime = value;
      this.showendtime = false;
    },
    cleandata () {
      this.image = ""
      this.imageurl = ""
      this.name = ""
      this.category = ""
      this.day = ""
      this.starttime = ""
      this.endtime = ""
      this.message = ""
    },
    onsubmit () {
      if (this.name == "") {
        alert("请输入姓名");
      } else {
        this.$ajax.get(this.baseurl + "visitor/add", {
          params: {
            avatar: this.imageurl,
            name: this.name,
            category: this.category,
            date: this.day,
            startTime: this.starttime,
            endTime: this.endtime,
            note: this.message
          }
        }).then((res) => {
          if (res.status == 200 && res.data.code == 20000) {
            Toast("创建成功！")
            this.cleandata();
          }
        })
          .catch((err) => {
            Toast("创建失败！", err)
          })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="less">
.hello {
  height: 100%;
  padding-bottom: 50px;
  &-choiceimg {
    width: 125px;
    height: 160px;
    margin: 20px auto 0px auto;
    background: #e8e8e8;
    display: flex;
    justify-content: center;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    .icon {
      align-self: center;
    }
    .manimg {
      position: absolute;
      // width: 100%;
      height: 100%;
      background-position: center center;
    }
  }
}
.victor {
  margin: 10px 0px;
  font-size: 20px;
  .victor-title {
    padding: 15px;
  }
}
.createbtn {
  width: 200px;
  height: 40px;
  background: #0692ed;
  color: white;
  display: block;
  margin: 20px auto;
  border-radius: 20px;
  line-height: 40px;
}
</style>
